<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handlecollectClick">
      <el-tab-pane
        :label="option.name"
        :name="option.status"
        v-for="option in collectOption"
        :key="option.status"
      >
        <div v-if="collecrtList.length > 0">
          <ul class="all-con">
            <li
              class="all-list"
              v-for="(item, index) in collecrtList"
              :key="index"
            >
              <div class="img-list" @click="getDetail(item.businessId)">
                <img :src="item.cover" alt="" />
              </div>
              <div class="img-con">
                <div @click="getDetail(item.businessId)">
                  <p class="img-title">{{ item.title }}</p>
                  <p class="img-intro">{{ item.description }}</p>
                  <ul>
                    <li v-for="tag in item.tags" :key="tag.avdRelItemId">
                      {{ tag.name }}
                    </li>
                  </ul>
                </div>
                <div class="img-bottom">
                  <div class="bot-left">
                    <img :src="item.user.creatorAvatar" alt="" />
                    <p>{{ item.user.creatorName }}</p>
                  </div>
                  <div class="bot-right">
                    <p v-if="option.status == '2'">
                      <img src="@/assets/img/goodred.png" alt="" />
                    </p>
                    <p v-if="option.status == '3'">
                      <img src="@/assets/img/collectred.png" alt="" />
                    </p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="allParams.page"
            :page-sizes="[4, 8, 12, 16]"
            :page-size="allParams.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-else>
          <el-empty></el-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { myCollectArt } from "@/api/user";
export default {
  data() {
    return {
      activeName: "3",
      collectOption: [
        {
          name: "我的收藏",
          status: "3",
        },
        {
          name: "我的点赞",
          status: "2",
        },
      ],
      collecrtList: [],
      total: 0,
      allParams: {
        contentModule: 0,
        page: 1,
        size: 4,
        types: [3],
      },
    };
  },
  created() {
    // this.getCollectArt();
  },
  methods: {
    // 选项点击
    handlecollectClick(e) {
      this.allParams.types = [parseInt(e.name)];
    },
    // 收藏点赞
    getCollectArt(val) {
      let user = {
        creatorAvatar: "",
        creatorName: "",
        creatorId: "",
      };
      myCollectArt(val).then((res) => {
        if (res.code == 200) {
          this.total = res.result.total;
          this.collecrtList = res.result.list;
          this.collecrtList.map((item) => {
            if (item.user == null) {
              // console.log(item);
              item.user = JSON.parse(JSON.stringify(user));
            }
          });
          // console.log(this.collecrtList);
        }
      });
    },
    // 分页
    handleSizeChange(size) {
      this.allParams.size = size;
      // console.log(this.allParams.size);
    },
    handleCurrentChange(currentPage) {
      this.allParams.page = currentPage;
      console.log(this.allParams.page);
    },
    // 跳转详情页
    getDetail(id) {
      this.$router.push({
        name: "guideDetail",
        query: {
          id,
        },
      });
    },
  },
  watch: {
    allParams: {
      handler(val, oldval) {
        console.log(val, "1111");
        this.getCollectArt(val);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
.all-con {
  background: #fff;
  // padding: 10px;
  border-radius: 5px;
  .all-list {
    padding: 10px 20px;
    background: #f5f7fa;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }
    .img-list {
      position: relative;
      height: 100%;
      img {
        // width: 120px;
        height: 130px;
      }
      i {
        font-size: 60px;
        color: #fff;
        position: absolute;
        top: 28%;
        left: 29%;
      }
    }
    .img-con {
        width: 78%;
      // padding: 1% 10% 1% 1%;
      .img-title {
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        color: #191a24;
        line-height: 25px;
        overflow: hidden; //溢出隐藏
        white-space: nowrap; //禁止换行
        text-overflow: ellipsis;
        margin-bottom: 10px;
      }
      .img-intro {
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
        text-align: justify;
        margin-bottom: 5px;
        width: 100%;
        // height: 32%;
        overflow: hidden;
        display: -webkit-box; /*弹性伸缩盒子*/
        -webkit-box-orient: vertical; /*子元素垂直排列*/
        -webkit-line-clamp: 2; /*可以显示的行数，超出部分用...表示*/
        text-overflow: ellipsis; /*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
      }
      ul {
        display: flex;
        font-size: 12px;
        color: #fff;
        li {
            padding: 3px 15px;
            background: #ECF1FF;
            border-radius: 2px;
            font-size: 14px;
            font-weight: 400;
            color: #4370F3;
            line-height: 20px;
            margin-right: 1%;
        }
      }
      .img-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 24px;
        .bot-left {
          display: flex;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: block;
            margin-right: 5px;
          }
        }
        .bot-right {
          display: flex;
          align-items: center;
          cursor: pointer;
          p {
            display: flex;
            align-items: center;
            margin-right: 10px;
            img {
              width: 18px;
              height: 18px;
              display: block;
              margin-right: 2px;
            }
            span {
              display: block;
            }
          }
        }
      }
    }
  }
}
.el-pagination {
  text-align: right;
  margin-top: 10px;
}
</style>